$(function () {
  // 1. 获取所有的友情链接
  function getLink() {
    $.ajax({
      url: 'admin/links',
      success: function (res) {
        if (res.status === 0) {
          let htmlStr = template('tpl-link', res);
          $('tbody').html(htmlStr);
        }
      }
    })
  }
  getLink();
  // 2. 添加友情链接
  const layer = layui.layer;
  const form = layui.form;
  var index;
  // const upload = layui.upload;
  $('button:contains("添加")').on('click', function () {
    let id = $(this).data("id");
    index = layer.open({
      type: 1,
      title: '添加友情链接',
      content: $('#addLink').html(),
      area: ['500px', '400px'],
    })


  })
  // 2.1.2 点击表单的提交事件
  $('body').on('submit', '#addForm', function (e) {
    e.preventDefault();
    let data = new FormData(this);
    $.ajax({
      type: 'POST',
      url: 'admin/links',
      contentType: false,
      processData: false,
      data,
      success: function (res) {
        if (res.status === 0) {
          layer.msg(res.message);
          console.log(index);
          layer.close(index);
          getLink();
        }
      }
    })
  })
  // 2.1 添加友情链接后提交
  $('body').on('click', '#test1', function () {
    // 2.1.1 点击按钮触发file表单提交事件
    $(this).next().trigger('click');
    $(this).next().on('change', function (e) {
      let fileObj = this.files[0];
      let url = URL.createObjectURL(fileObj);
      $(this).next().attr('src', url);
    })
  })


  // 2.2 编辑按钮
  $('body').on('click', 'button:contains("编辑")', function () {
    let id = $(this).data("id");
    $.ajax({
      url: 'admin/links/' + id,
      success: function (res) {
        if (res.status === 0) {
          index = layer.open({
            type: 1,
            title: '编辑友情链接',
            content: $('#editLink').html(),
            area: ['500px', '400px'],
            success: function () {
              form.val("editForm", res.data);
              if (res.data.linkicon) {
                // 老师的图片都是有的,不过背景是透明的,字体是white的,只有在有背景色的时候才显示
                $("#editForm img").attr("src", "http://localhost:8888/uploads/" + res.data.linkicon);
              }
              // 2.2.2 编辑按钮后提交
            }
          })
        }
      }
    })

  })

  // 提交编辑按钮
  $('body').on('submit', '#editForm', function (e) {
    e.preventDefault();
    let data = new FormData(this);
    let id = data.get("id")
    // 判断是否有新的图片提交, 如果没有提交就不用修改
    if ($(this).find('input[type="file"]')[0].files[0]) {
      // 给 FormData 设置属性值，如果FormData 对应的属性值存在则覆盖原值，否则新增一项属性值
      data.set('linkicon', $(this).find('input[type="file"]')[0].files[0]);
    }
    // 删除掉formdata对象中的id属性,因为后台数据不需要这一项
    data.delete("id");
    $.ajax({
      type: 'PUT',
      url: 'admin/links/' + id,
      contentType: false,
      processData: false,
      data,
      success: function (res) {
        if (res.status === 0) {
          layer.msg(res.message);
          layer.close(index);
          getLink();
        }
      }
    })
  })

  $('body').on('click', '#test2', function () {
    // 2.1.1 点击按钮触发file表单提交事件
    $(this).next().trigger('click');
    $(this).next().on('change', function (e) {
      let fileObj = this.files[0];
      let url = URL.createObjectURL(fileObj);
      $(this).next().attr('src', url);

    })
  })


  $('body').on('click', 'button:contains("删除")', function () {
    let id = $(this).data("id");
    $.ajax({
      type: 'delete',
      url: 'admin/links/' + id,
      success: function (res) {
        if (res.status === 0) {
          layer.msg(res.message);
          getLink();
        }
      }
    })
  });

})

